<template>
  <ul class="upload-list" :class="{disabled: disabled}">
    <transition-group name="push-image">
      <li v-for="(src, index) in images" 
        :key="index" 
        :style="{width: `${width}px`, height: `${height}px`}"
        @mouseover="onOver($event.target)" 
        @mouseout="onOut($event.target)">
        <img :src="src">
        <span class="ico-close" :style="{'line-height': `${height}px`}" @click="$emit('delete-image', index)">删除</span>
      </li>
    </transition-group>
    <li :style="{width: `${width}px`, height: `${height}px`}" v-if="!disabled" v-show="images.length < max"><slot></slot></li>
  </ul>
</template>

<script>
  export default {
    props: {
      images: {
        type: Array,
        default: []
      },
      disabled: {
        type: Boolean,
        default: false
      },
      width: {
        type: Number,
        default: 80
      },
      height: {
        type: Number,
        default: 80
      },
      // 上传图片最大张数
      max: {
        type: Number,
        default: 5
      }
    },
    data() {
      return {
      }
    },
    methods: {
      onOver(el) {
        if (el.nodeName === 'SPAN') {
          el.style.opacity = 1
        }
      },
      onOut(el) {
        if (el.nodeName === 'SPAN') {
          el.style.opacity = 0
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .upload-list {
    &.disabled {
      li {
        img {
          cursor: default;
        }
        span {
          display: none;
        }
      }
    }
    li {
      position: relative;
      float: left;
      margin-right: 10px;
      margin-bottom: 10px;
      overflow: hidden;
      cursor: pointer;
    }
    img {
      width: 100%;
      height: 100%;
    }
    .ico-close {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,.5);
      color: #fff;
      font-size: 14px;
      text-align: center;
      opacity: 0;
      transition: all .2s;
    }
  }
  .push-image-enter-active, .push-image-leave-active {
    transition: all .3s;
  }
  .push-image-enter, .push-image-leave-to {
    opacity: 0;
  }
</style>